<template>
	<div class="goods">
		<div class="menu-wrapper" ref="menu_wrapper">
			<ul>
				<li v-for="(item,index) of goods" :key="index" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
					<span class="text">
						<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foods_wrapper">
			<ul>
				<li v-for="(item,index) of goods" :key="index" class="food-list food-list-hook">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li @click="selectFood(food,$event)" v-for="food of item.foods" class="food-item">
							<div class="icon">
								<img width="57" height="57" :src="food.icon" alt="">
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<cartcontrol :food="food" @cart-add="cartAdd"></cartcontrol>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shopcart ref="shopcart" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice" :select-foods="selectFoods" ></shopcart>
		<food :food="selectedFood" ref="food" @cart-add="cartAdd"></food>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'
import shopcart from '@/components/shopcart/shopcart.vue'
import cartcontrol from '@/components/cartcontrol/cartcontrol.vue'
import food from '@/components/food/food.vue'
import axios from 'axios'

export default{
	props:{
		goods:Array,
		seller:Object
	},
	components:{
		shopcart,
		cartcontrol,
		food
	},
	data(){
		return{
			//goods:[],
			listHeight:[],
			scrollY:0,
			selectedFood:{}
		}
	},
	created(){
		this.classMap=['decrease','discount','special','invoice','guarantee'];
	},
	mounted(){
		this.menuScroll=new Bscroll(this.$refs.menu_wrapper,{
			click:true
		})
		this.foodsScroll=new Bscroll(this.$refs.foods_wrapper,{
			probeType:3,
			click:true
		})	
		this.foodsScroll.on('scroll',(pos)=>{
			this.scrollY=Math.abs(Math.round(pos.y));
			this._calculateHeight();
		})
	},
	methods:{
		_calculateHeight(){
			let foodList=this.$refs.foods_wrapper.getElementsByClassName('food-list-hook');
			let height=0;
			this.listHeight.push(height);
			for(let i=0;i<foodList.length;i++){
				let item=foodList[i]
				height+=item.clientHeight;
				this.listHeight.push(height);
			}
		},
		selectMenu(index,event){
			if(!event._constructed){
				return;
			}
			let foodList=this.$refs.foods_wrapper.getElementsByClassName('food-list-hook');
			let el=foodList[index];
			this.foodsScroll.scrollToElement(el,300);
			//console.log(index)
		},
		cartAdd(el){
			this.$nextTick(() => {
		        // 调用shopcart组件的drop()函数
		　       this.$refs['shopcart'].drop(el);　
		    });
		},
		selectFood(food,event){
			if(!event._constructed){
				return
			}
			this.selectedFood=food;
			this.$refs.food.show();
		}
	},
	computed:{
		currentIndex(){
			for(let i=0;i<this.listHeight.length;i++){
				let height1=this.listHeight[i];
				let height2=this.listHeight[i+1];
				if(!height2||(this.scrollY>=height1&&this.scrollY<height2)){
					return i;
				}	
			}
			return 0;
		},
		selectFoods(){
			let foods=[];
			this.goods.forEach((goods)=>{
				goods.foods.forEach((food)=>{
					if(food.count){
						foods.push(food)
					}
				})
			})
			return foods
		}
	}
}

</script>

<style lang="stylus" scoped>
@import "~@/common/stylus/mixin.styl"                                                                                                                

.goods{position:absolute;left:0;top:174px;right:0;bottom:46px;background:#fff;width:100%;display:flex;overflow:hidden;}

.menu-wrapper{width:80px;background:#f3f5f7;touch-action:none;}
.menu-item{display:table;height:54px;width:56px;line-height:14px;border-bottom:0.5px solid rgba(7,17,27,0.1);padding:0 12px;touch-action:none;}
.menu-item .icon{display:inline-block;width:16px;height:16px;vertical-align:top;margin-right:6px;background-size:16px 16px;background-repeat:no-repeat;}
.menu-item .decrease
  bg-image('decrease_3')
.menu-item .discount
  bg-image('discount_3')
.menu-item .guarantee
  bg-image('guarantee_3')
.menu-item .invoice
  bg-image('invoice_3')
.menu-item .special
  bg-image('special_3')
.menu-item .text{font-size:12px;display:table-cell;width:56px;vertical-align:middle;}
.menu-wrapper .current{background:#fff;font-weight:700;position:relative;margin-top:-1px;z-index:10;}
.menu-wrapper .current .text{border:none;}

.foods-wrapper{flex:1;}
.title{padding-left:14px;height:26px;line-height:26px;border-left:2px solid #d9dde1;font-size:12px;color:rgb(147,153,159);background:#f3f5f7;}
.food-item{display:flex;margin:18px;border-bottom:0.5px solid rgba(7,17,27,0.1);padding-bottom:18px;position:relative;}
.food-item:last-child{border-bottom:none;margin-bottom:0;}
.icon{width:57px;height:57px;margin-right:10px;}
.content{flex:1;}
.content .name{margin:2px 0 8px 0;height:14px;line-height:14px;font-size:14px;color:rgb(7,17,27);}
.content .desc{margin-bottom:8px;line-height:11px;font-size:10px;color:rgb(147,153,159);}
.content .extra{line-height:10px;font-size:10px;color:rgb(147,153,159);}
.content .extra .count{margin-right:12px;}
.content .price{font-weight:700;line-height:24px;}
.content .price .now{margin-right:18px;font-size:14px;color:rgb(240,20,20);}
.content .price .old{text-decoration:none;font-size:10px;color:rgb(147,153,159);}

.cartcontrol-wrapper{position:absolute;right:0;bottom:12px;}
</style>
